import { StyleSheet, View, Modal, Pressable, Text, ViewStyle } from 'react-native';
import React, { useRef, useEffect, useState } from 'react';
import { px2dp, scale } from '~/utils/px2dp';
import Icon from 'react-native-vector-icons/Ionicons';
import * as Animatable from 'react-native-animatable';

interface Props {
    title?: string;
    visible: boolean;
    toggleVisible: Function;
    children: JSX.Element;
    style?: ViewStyle;
    modalStyle?: ViewStyle;
}
export default function TransitionModal(props: Props) {
    const { visible, toggleVisible, children, title, style, modalStyle } = props;
    const modalizeRef = useRef<any>(null);
    const [animationType, setAnimationType] = useState('fadeInUp');

    useEffect(() => {
        if (visible) {
            setAnimationType('fadeInUp');
        }
        modalizeRef.current?.fadeInUp(500);
    }, [visible]);
    const closeModal = () => {
        setAnimationType('fadeOutDownBig');
        setTimeout(() => {
            toggleVisible && toggleVisible();
        }, 500);
    };
    return (
        <Modal visible={visible} transparent={true} statusBarTranslucent={true} hardwareAccelerated={true}>
            <View style={[styles.modal, modalStyle]}>
                <Animatable.View
                    ref={modalizeRef}
                    style={[styles.modalContent, style]}
                    animation={animationType}
                    duration={500}>
                    <View style={[styles.row, styles.modal_header]}>
                        <View />
                        <Text style={styles.title}>{title}</Text>
                        <Pressable onPress={closeModal}>
                            <Icon name="close-outline" size={26} color={'#000'}></Icon>
                        </Pressable>
                    </View>
                    <View>{children}</View>
                </Animatable.View>
            </View>
        </Modal>
    );
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    modal: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.2)',
        justifyContent: 'flex-end',
    },
    modalContent: {
        backgroundColor: '#fff',
        borderRadius: px2dp(24),
        padding: px2dp(24),
        // height: '56%',
    },
    modal_header: {
        justifyContent: 'space-between',
    },
    title: {
        color: '#191919',
        fontSize: scale(28),
        fontWeight: 'bold',
    },
});
